<template>
  <el-row style="backgroundcolor: white; height: 600px">
    <el-row>
      <el-col :span="24" :xs="24">
        <h1 style="text-align: center">欢迎使用注册</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20" :push="2" :xs="24">
        <el-tabs :activeName="phone" type="card">
          <el-tab-pane label="手机注册" name="phone">
            <el-row>
              <el-col :span="16" :push="7" :xs="24">
                <el-form
                  ref="form"
                  size="small"
                  style="width: 60%; margin-top: 100px"
                  :label-position="position"
                  class="demo-ruleForm"
                  :rules="rules"
                  :model="form"
                  label-width="80px"
                >
                  <el-form-item label="手机号码" prop="phone">
                    <i class="el-icon-phone"></i>
                    <el-input
                      v-model="form.phone"
                      type="text"
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="验证码" prop="yzm">
                    <el-input v-model="form.yzm" type="text"></el-input
                  ></el-form-item>
                  <el-form-item label=""
                    ><el-button
                      type="primary"
                      style="margin-top: 15px"
                      @click="yzm"
                      >{{ yz }}</el-button
                    ></el-form-item
                  >
                  <el-form-item label="按钮">
                    <el-button type="primary" @click="zhu">提交</el-button>
                  </el-form-item>
                </el-form>
                <el-radio-group v-model="position">
                  <el-radio label="right">右</el-radio>
                  <el-radio label="top">中</el-radio>
                  <el-radio label="left">左</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="账号注册" name="zhang">
            <el-row>
              <el-col :span="16" :push="7" :xs="24">
                <el-form
                  ref="formCreate"
                  size="small"
                  style="width: 60%; margin-top: 100px"
                  :label-position="position"
                  class="demo-ruleForm"
                  :rules="rules"
                  :model="form"
                  label-width="80px"
                >
                  <el-form-item label="账号" prop="name">
                    <i class="el-icon-user"></i>
                    <el-input
                      v-model="form.name"
                      type="text"
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="pass">
                    <i class="el-icon-message"></i>
                    <el-input
                      v-model="form.pass"
                      type="password"
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="再次输入密码" prop="pass">
                    <i class="el-icon-message"></i>
                    <el-input
                      v-model="form.yzm"
                      type="yzm"
                      placeholder="再次输入密码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="按钮">
                    <el-button @click="userSubmit">提交</el-button>
                    <el-button type="reset" @click="reset('form')"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-form>
                <el-radio-group v-model="position">
                  <el-radio label="right">右</el-radio>
                  <el-radio label="top">中</el-radio>
                  <el-radio label="left">左</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <div>
      <router-view></router-view>
    </div>
  </el-row>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      phone: "phone",
      position: "left",
      yz: "验证码发送",
      t: "",
      rd: "",
      info: "",
      form: {
        name: "",
        pass: "",
        time: new Date().toLocaleString(),
        yzm: "",
        phone: "",
      },
      rules: {
        name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 15, message: "长度在3-5个范围", trigger: "blur" },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "请输入正确手机号",
            trigger: "blur",
          },
        ],
        yzm: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    reset: function (formname) {
      this.$refs[formname].resetFields();
    },
    userSubmit: function () {
      let judge = this.$refs.formCreate.validate();
      let self = this;
      if (self.form.pass === self.form.yzm) {
        console.log(judge);
        judge.then((res) => {
          if (res) {
            let obj = {
              user: self.form.name,
              pass: self.form.pass,
            };
            self.$http("post", "/create", obj).then((x) => {
              console.log(x);
              if (x.data.ok === 200) {
                self.$message.success("注册成功");
                self.$router.push({
                  path: '/deng',
                  query: {
                    user: obj.user
                  }
                })
              } else {
                self.$message.error("注册失败");
              }
            });
          }
        });
      } else {
        self.$message.error("两次密码不一致");
      }
    },
    zhu() {
      const str = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      const t = str.test(this.form.phone);
      if (t) {
        console.log("符合标准");
        console.log(str.compile(this.form.phone));
        this.$store.state.phone = this.form.phone;
        if (this.rd == this.form.yzm) {
          console.log(this.rd);
          this.$store.dispatch("zhu");
          // const a=200

          console.log(this.$store.state.info);
          if (this.$store.state.info.success == "200") {
            // this.$confirm("是否跳转","提示",{
            //   confirmButtonText:"确定",
            //   cancalButtonText:"取消",
            //   type:"warning"
            // }).then(()=>{
            //    this.$router.push({
            //   name:"view",
            //   params:{
            //     name:this.form.phone
            //   }
            // })
            // }).catch(()=>{
            //   this.$message({
            //     type:"info",
            //     message:"跳转取消"
            //   })
            // })
            this.$router.push({
              name: "view",
              params: {
                name: this.form.phone,
              },
            });
          }
        } else {
          this.info = "验证码错误";
        }
      } else {
        console.log("不符合格式");
      }
    },
    // updated() {
    //   console.log(1)
    //   console.log(this.$store.state.info)
    // },
    yzm() {
      let phone = this.form.phone;
      let t = 60;
      this.t = setInterval(() => {
        t = t - 1;
        if (t == -1) {
          this.yz = "验证码发送";
        }
        if (t > 0) {
          this.yz = t + "秒后可发送";
        }
      }, 1000);

      const data = {
        phone: phone,
      };
      const header = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      axios
        .post("http://localhost/dome.php", qs.stringify(data), header)
        .then((res) => {
          this.rd = res.data.rand;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getInfo: function (to, from, next) {
      console.log(to);
      console.log(from);
      console.log(next);
    },
  },

  destroyed() {
    this.$listeners;
    clearInterval(this.t);
  },
  // watch: {
  //   '$router':'getInfo'
  // }
};
</script>

